<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="./vue.js"></script>
  </head>

  <body>
    <div id="app">
      <p style="color: red">hello</p>

      <!-- 对象 {css属性名(驼峰式命名 或 短横线分隔双引号括起来):属性值} -->
      <p
        :style="{color: activeColor, fontSize:activeFontSize, 'background-color':'rgb(58, 238, 208)'}"
      >
        hello
      </p>
      <p :style="styleObj">styleObj</p>

      <!-- 数组 -->
      <p :style="[styleObj, {border:'5px solid #DC143C'}]">
        数组&对象 组合使用
      </p>
    </div>

    <script>
      const App = {
        data: function () {
          return {
            activeColor: "red",
            activeFontSize: "50px",
            styleObj: {
              color: "red",
              fontSize: "30px",
              "background-color": "rgb(187, 185, 88)",
            },
          };
        },
      };
      let app = Vue.createApp(App).mount("#app");
      console.log(app);
    </script>
  </body>
</html>
